<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)

const open = async () => {
  dialogVisible.value = true
}
const formModel = ref({
  idNumber: '',
  name: ''
})
const rules = {
  idNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
}
defineExpose({
  open
})

const formRef = ref()
const emit = defineEmits(['success'])
const onSubmit = async () => {
  await formRef.value.validate()

  ElMessage({
    type: 'success',
    message: '实名成功'
  })
  dialogVisible.value = false
  emit('success')
}
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="'实名认证'" width="40%">
    <div>
      <el-form
        ref="formRef"
        :model="formModel"
        :rules="rules"
        label-width="100px"
        style="padding-right: 30px"
      >
        <el-form-item prop="name" label="姓名" v-if="!formModel.id">
          <el-input
            :prefix-icon="User"
            placeholder="请输入姓名"
            v-model="formModel.name"
          ></el-input>
        </el-form-item>
        <el-form-item prop="idNumber" label="身份证号" v-if="!formModel.id">
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入身份证号"
            v-model="formModel.idNumber"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
